<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('sidebar.borrowBack')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('loanAfterManage.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('loanAfterManage.crumbsTwo')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- -------------搜索查询栏------------------------ -->
    <search 
			:searchData="searchData" 
			@search="search" 
			:searchRight="true"
			:outputRight="false"
    ></search>
    
    
    <div class="list_operation" >
      <el-button v-if="$store.state.common.permiss.collectionlist.includes('transfer')" type="primary" @click="todayRedeploy">{{$t('loanAfterManage.redeploy')}}</el-button>
    </div>

    <!-- -------------表单显示栏------------------------ -->
    <div class="table" v-if="true">
      <template>
        <el-table :data="tableData" size="mini" v-loading="loadFlag" stripe @selection-change="handleSelectionChange">
          <el-table-column type="selection" :selectable="unSelect" width="55">
          </el-table-column>
          <el-table-column align="center" prop="orderId" :label="$t('public.orderId')" >
          </el-table-column>
          <el-table-column align="center" prop="userName" :label="$t('public.name')" >
          </el-table-column>
          <el-table-column align="center" prop="userPhone" :label="$t('public.userTel')" >
          </el-table-column>
          <el-table-column align="center" prop="loanAmount" :label="$t('public.no30')" >
            <template slot-scope="scope">
              <span v-if="scope.row.loanAmount!==null&&scope.row.loanAmount!==undefined&&scope.row.loanAmount!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.loanAmount)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
            <el-table-column align="center" prop="overdueDays" :label="$t('public.no28')" >
            </el-table-column>
            <el-table-column align="center" prop="overdueInterest" :label="$t('public.no56')" min-width="100">
              <template slot-scope="scope">
                <span>{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.overdueInterest)}}{{$store.state.common.vi_currency}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="refundAmount" :label="$t('public.no65')" >
              <template slot-scope="scope">
                <span>{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.refundAmount)}}{{$store.state.common.vi_currency}}</span>
              </template>
            </el-table-column>
          <el-table-column align="center" prop="waitAmount" :label="$t('loanAfterManage.waitAmount')">
            <template slot-scope="scope">
              <span>{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.waitAmount)}}{{$store.state.common.vi_currency}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="lastTime" :label="$t('loanAfterManage.time')" >
          </el-table-column>
            <el-table-column align="center" prop="createTime" :label="$t('public.no71')">
            </el-table-column>
            <el-table-column align="center" prop="promiseTime" :label="$t('operationDetail.no8')">
            </el-table-column>
          <el-table-column align="center" prop="status" :label="$t('loanAfterManage.status')" min-width="100">
            <template slot-scope="scope">
              <span >{{$t($store.getters.operationStatus(scope.row.status))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="adminName" :label="$t('loanAfterManage.name')">
          </el-table-column>
          <el-table-column align="center" prop="typeCollectionName" :label="$t('new.no12')">
          </el-table-column>
          <!-- <el-table-column align="center" prop="callTime" :label="$t('new.no83')" width="100">
          </el-table-column>
          <el-table-column align="center" prop="callStatus" :label="$t('new.no84')"  width="100">
            <template slot-scope="scope">
              <span >{{$t($store.getters.callStatus_status(scope.row.callStatus))}}</span>
            </template>
          </el-table-column> -->
          <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" min-width="120">
            <template slot-scope="scope">
              <span 
                v-if="$store.state.common.permiss.collectionlist.includes('view')"
                class="table_opr" 
                @click="detail(scope.row.userId,scope.row.orderId)">
                {{$t('loanAfterManage.sel')}}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- ------------  分页显示栏  ------------------------ -->
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          layout="sizes, prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :page-size="pagination.pageSize"
          @size-change="handleSizeChange"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-row>

    <!-- ------------------ 点击转派弹窗开始 -------------------- -->
    <el-dialog :title="$t('loanAfterManage.redeploy')" :visible.sync="redeployFlag" width="650px">
      <div class="left2right">
        <span class="left">{{$t('loanAfterManage.type')}}:</span>
        <div class="right">
          {{orderType}}
        </div>
      </div>
      <div class="left2right">
        <span class="left">{{$t('loanAfterManage.redeployTo')}}:</span>
        <div class="right">
          <el-select size="small" v-model="redeployStatus" :placeholder="$t('public.placeholder')">
            <el-option v-for="item in memberOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="left2right">
        <span class="left">{{$t('loanAfterManage.reason')}}:</span>
        <div class="right">
          <el-input type="textarea" v-model="reason" :placeholder="$t('loanAfterManage.placeholder')+'~'" maxlength="600"></el-input>
        </div>
      </div>
      <div class="left2right">
        <span class="left"></span>
        <div class="right">
          <el-button type="primary" size="small" @click="redeploySubmit">{{$t('proManage.sure')}}</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- ------------------ 点击转派弹窗结束 -------------------- -->

  
    <div class="foot"></div>

  </div>
</template>
<script>
import getGroupMem from 'src/mixins/getGroupMem.js';
export default {
  name: 'collectionList',
  mixins:[getGroupMem],
  data () {
    const searchData=[
      {
        type: 'input',
        label: 'public.orderId',
        attr: 'orderId',
        value: ''
      },
      {
        type: 'input',
        label: 'public.name',
        attr: 'name',
        value: ''
      },{
        type: 'input',
        label: 'public.userTel',
        attr: 'phone',
        value: ''
      },{
        type: 'select',
        attr: 'adminId',
        label: 'loanAfterManage.name',
        option: [],
        value: '',
        langFlag: false,
      },
      {
        type: 'select',
        attr: 'type',
        label: 'new.no12',
        option: [],
        value: '',
        langFlag: false,
      },
      {
        type: 'doubleInput',
        label: 'public.no28',
        // attr: ['overdueDaysBegin','overdueDaysEnd'],
        attr: 'overdueDays',
        value: []
      },{
        type: 'rangePicker',
        label: 'loanAfterManage.time',
        attr: 'collectionTime',
        value: [],
      },{
        type: 'rangePicker',
        label: 'loanAfterManage.paidanTime',
        attr: 'dispatchTime',
        value: [],
      },{
        type: 'rangePicker',
        label: 'public.no71',
        attr: 'createTime',
        value: [],
      },{
        type: 'rangePicker',
        label: 'public.backMoneyDate',
        attr: 'refundTime',
        value: [],
      },{
        type: 'rangePicker',
        label: 'new.no83',
        attr: 'callTime',
        value: [],
      },{
        type: 'select',
        attr: 'callStatus',
        label: 'new.no84',
        option: this.$store.state.options.groupCalls_options,
        value: '',
        langFlag: true,
      }]
    return {
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      flag: true, // 点击开关
      loadFlag: false, // 点击开关
      searchData:searchData,
      formInline: {},
      memberOptions: [], // 在职催收员列表
      tableData: [], // 列表表格数据汇总
      redeployFlag: false, // 转派弹窗开关
      redeployStatus: '', // 转派弹窗审核员下拉框对应数据
      multipleSelection: [], // 可勾选表格选中项
      orderIds: [], // 选中的订单ID数组
      orderType: '', // 订单类型
      reason: '',// 转派原因描述
      userName: [],// 选中数据里所有的催收员,
      processCollectionConfigDOList: [],// 催收阶段
    }
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    search(search) { // 搜索
        console.log(search.overdueDays)
      this.formInline = {
        orderId: search.orderId,
        name:search.name,
        phone: search.phone,
        status: search.status,
        adminId: search.adminId,
        // type: search.type,
        overdueDaysBegin: search.type?this.processCollectionConfigDOList.filter(value=>value.id==search.type)[0].daysStart:search.overdueDays[0],
        overdueDaysEnd: search.type?this.processCollectionConfigDOList.filter(value=>value.id==search.type)[0].daysEnd:search.overdueDays[1],
        createTimeBegin: search.createTime?search.createTime[0]:'',
        createTimeEnd: search.createTime?search.createTime[1]:'',
        dispatchTimeBegin: search.dispatchTime?search.dispatchTime[0]:'',
        dispatchTimeEnd: search.dispatchTime?search.dispatchTime[1]:'',
        collectionTimeBegin: search.collectionTime?search.collectionTime[0]:'',
        collectionTimeEnd: search.collectionTime?search.collectionTime[1]:'',
        lastRefundTimeBegin: search.refundTime?search.refundTime[0]:'',
        lastRefundTimeEnd: search.refundTime?search.refundTime[1]:'',
        callStartTime: search.callTime[0],
        callEndTime: search.callTime[1],
        callStatus:search.callStatus,
        appName:search.appName,
        appPackage:search.appPackage
      };
      if (this.flag) {
        this.pagination.currentPage = 1;
        this.flag = false;
        this.getTableData();
      }
      
    },
    detail (userId, orderId) { // 查看详情点击操作
      this.$router.push({path: '/collectiondetail', query: {userId, orderId}});
    },
    getTableData () { // 放款列表获取
      this.loadFlag = true;
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {
          ...this.formInline
        }       
      }
      this.$axios.post(this.$action.collection_list, option).then(res => {
        this.flag = true;
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        }else{
          this.$globalMsg.error(res.message)
        }
        this.loadFlag = false;
      })
    },
    redeploySubmit () { // 转派确认操作
      if (this.redeployStatus == '') {
        this.$globalMsg.error(this.$t('loanAfterManage.adminFirst'));
        return;
      }
      if (this.reason == '') {
        this.$globalMsg.error(this.$t('loanAfterManage.placeholder'));
        return;
      }
      if (this.flag) {
        this.flag = false;
        let option = {
          param:{
            orderNoList: this.orderIds,
            adminId: this.redeployStatus,
            remark: this.reason
          }
        }
        this.$axios.post(this.$action.collection_orderShift, option).then(res => {
          this.flag = true;
          if (res.code == 200) {
            this.$globalMsg.success(this.$t('message.success'));
          } else {
            this.$globalMsg.error(this.$t('message.warning'));
          }
          this.getTableData();
          this.orderIds = [];
          this.multipleSelection = [];
          this.redeployStatus = '';
          this.reason = '';
          this.redeployFlag = false;
        })
      }
    },
    handleSelectionChange (val) { // 表格选中项数据
      this.multipleSelection = val;
    },
    todayRedeploy () { // 转派按钮点击操作
      if (this.orderType == '') {
        this.$globalMsg.error(this.$t('loanAfterManage.selFirst'));
      } else if(this.isshowselfdom=='true'&&this.userName.some(value=>!value)){
        this.$globalMsg.error(this.$t('teleMarketing.no38'));
      } else {
        // this.operationAdmin1();// 获取在职催收员列表
        this.redeployFlag = true;
      }
    },
    redeployClose () {
      this.redeployFlag = false;
      this.redeployStatus = '';
      this.reason = '';
    },
    joinType () { // 订单转派弹窗对应数据处理
      let unique = function (arr) {
        var res = [];
        var json = {};
        for (var i = 0; i < arr.length; i++) {
          if (!json[arr[i]]) {
            res.push(arr[i]);
            json[arr[i]] = 1;
          }
        }
        return res;
      }
      let arr = [];
      let brr = [];
      let crr = [];
      let drr = [];
      this.multipleSelection.forEach(value => {
        arr.push(value.orderNo);
        brr.push(value.type);
        drr.push(value.adminName);
      })
      brr = unique(brr);
      brr.forEach(item => {
        if (item == 1) {
          crr.push('S1');
        }
        if (item == 2) {
          crr.push('S2');
        }
        if (item == 3) {
          crr.push('M1');
        }
        if (item == 4) {
          crr.push('M2');
        }
        if (item == 5) {
          crr.push('M3');
        }
        if (item == 6) {
          crr.push('S3');
        }
        if (item == 7) {
          crr.push('M3+');
        }
        if (item == 0) {
          crr.push('S1');
        }
      })
      this.userName = drr;
      this.orderIds = arr;
      this.orderType = crr.join();
    },
    unSelect (row) {
      return row.status != 100;
    },
    getStagelData(){// 获取催收阶段下拉框数据
      let option = {
        param:{}
      }
      this.$axios.post(this.$action.selection_stage_option, option).then(res => {
        if (res.code == 200) {
          let arr = res.data
          arr.forEach(item => {
            item.value = item.id
            item.label = item.stage
          })
          this.searchData.filter(value=>value.attr=='type')[0].option = arr
          this.processCollectionConfigDOList = arr
				}
      })
    },
  },
  watch: {
    multipleSelection () {
      this.joinType();
    }
  },
  mounted () {
    this.getGroupMem(3).then(arr=>{
      this.searchData[3].option=arr;
      this.memberOptions = arr
    })
    this.getTableData();// 获取入催订单列表
    this.getStagelData();
  }
}
</script>

<style scoped lang="scss">

</style>
